<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="css/app.css"/>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
		<style>
			/*文件夹图标*/
			@font-face {
			  font-family: 'iconfont';  /* project id 1571015 */
			  src: url('//at.alicdn.com/t/font_1571015_wp63s5c36xe.eot');
			  src: url('//at.alicdn.com/t/font_1571015_wp63s5c36xe.eot?#iefix') format('embedded-opentype'),
			  url('//at.alicdn.com/t/font_1571015_wp63s5c36xe.woff2') format('woff2'),
			  url('//at.alicdn.com/t/font_1571015_wp63s5c36xe.woff') format('woff'),
			  url('//at.alicdn.com/t/font_1571015_wp63s5c36xe.ttf') format('truetype'),
			  url('//at.alicdn.com/t/font_1571015_wp63s5c36xe.svg#iconfont') format('svg');
			}
			.iconfont {
			  font-family: "iconfont" !important;
			  font-size: 16px;
			  font-style: normal;
			  -webkit-font-smoothing: antialiased;
			  -moz-osx-font-smoothing: grayscale;
			}
			.right{
				float: right;
				margin-right: 20px;
				display: none;
			}
			.mui-btn{
		        margin-top: 10px;
		        margin-left: 10px;
		    }
		    #confirmBtn{
		    	float: right;
		    }
		    .folder-listall{
		    	height:55px;
		    }
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<span class="mui-icon mui-pull-left" id="selectall" style="color: #000;font-size: 15px"; onclick="checkedon()">全选</span>
			<h1 class="mui-title" style="font-size: 20px;">编辑</h1>
			<a class="mui-action-back mui-icon" href="#popover2" style="color: #000;float: right; font-size: 15px;" id="menu_folder">完成</a>
		</header>
		<div class="mui-input-row mui-search"> 
		    <input type="search" class="mui-input-clear" placeholder="搜索">
		</div>
		
		<div id="folder_all">
			<!--一个文件夹-->
			<div class="folder-list" >
				<div class="mui-input-row mui-checkbox mui-left folder-listall">
					<label class="inp-label">
						<span class="iconfont" style="color: #F3E07F;">&#xe66d;</span>
						<span class="title-weight">文件夹1</span>
						<p class="title">时间</p>
					</label>
					<input name="checkbox" value="" type="checkbox" class="inp-check">
				</div>
			</div>
			<!--一个文件夹-->
			<div class="folder-list" >
				<div class="mui-input-row mui-checkbox mui-left folder-listall">
					<label class="inp-label">
						<span class="iconfont" style="color: #F3E07F;">&#xe66d;</span>
						<span class="title-weight">文件夹2</span>
						<p class="title">时间</p>
					</label>
					<input name="checkbox" value="" type="checkbox" class="inp-check">
				</div>
			</div>
			<!--一个笔记-->
			<div class="note-list" >
				<div class="mui-input-row mui-checkbox mui-left">
					<label class="inp-label">
						<span class="title-weight">标题</span>
						<p class="title">摘要</p>
						<p class="title">时间</p>
					</label>
					<input name="checkbox" value="" type="checkbox" class="inp-check">
				</div>
			</div>
		</div>
		
		<nav class="mui-bar mui-bar-tab">
			<a href="folder_page_move.html">
			<button type="button" class="mui-btn mui-btn-outlined" disabled="disabled" οnclick="move_to()">
		            <span class="mui-icon mui-icon-arrowthinup fa fa-folder-o fa-lg"></span>
		            移动	
		        </button></a>
			<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined" disabled="disabled" id='confirmBtn'>
		            <span class="mui-icon mui-icon-trash fa fa-trash-o fa-lg"></span>
		            删除	
		        </button>
		    <div id="info"></div>
		</nav>
		<script type="text/javascript" src="js/mui.min.js" ></script>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script>
			function plusReady(){
            // 在这里调用plus api
	        }
	        if(window.plus){
	            plusReady();
	        }else{
	            document.addEventListener('plusready',plusReady,false);
	        }	
			mui.init({
                beforeback: function() {
                var list = plus.webview.currentWebview().opener();
                    //触发列表界面的自定义事件（refresh）,从而进行数据刷新   
                    mui.fire(list, 'refresh');
                    //返回true，继续页面关闭逻辑   
                    return true;
                }
            })
			
			
			//全选
			function checkedon(){
				if($('#selectall').text()==='全选'){
        			$(".inp-check").prop("checked",true);
        			$('#selectall').html('取消全选');
					$('.mui-btn-outlined').removeAttr('disabled');
				}else{
					$(".inp-check").prop("checked",false);
        			$('#selectall').html('全选');
        			$('.mui-btn-outlined').attr('disabled','disabled');
				}
			}
			
			//移动和删除按钮是否可点击
			$('.inp-check').change(function(){
				if($("input[type=checkbox]:checked").length===0){
					$('.mui-btn-outlined').attr('disabled','disabled');
				}else{
					$("input[type=checkbox]").each(function(){
	   					if( $(this).is(":checked") ){
	       					$('.mui-btn-outlined').removeAttr('disabled');
	    				}
					});
				}
			})
			
			//删除按钮
			//mui初始化
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			document.getElementById("confirmBtn").addEventListener('tap', function() {
				var btnArray = ['取消', '确定'];
				mui.confirm('删除后无法恢复', '确认删除?', btnArray, function(e) {
					if (e.index == 1) {
						mui.toast('删除成功');
					}
				})
			});
			
		</script>
	</body>
</html>
